<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import useUserStore from "../../store/modules/users.ts";
import { ElNotification } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import {getTime} from "../../utils/time.ts";

const loginForm = reactive({username: "admin", password: "111111"});

//获取小仓库实例
const userStore = useUserStore();

//获取路由跳转的实例
const router = useRouter();
const route = useRoute();

//根据返回结果判断Notification
let loading = ref(false);

//获取表单实例
const loginForms = ref();

//自定义校验规则
const validatorUsername = (rule: any, value: string, callback: any) => {
  if (value.length > 3) {
    callback();
  } else {
    callback(new Error("长度有问题"));
  }
}

const validatorPassword = (rule: any, value: string, callback: any) => {
  if (value.length > 3) {
    callback();
  } else {
    callback(new Error("长度有问题"));
  }
}


//定义表单校验的规则
const loginRules = {
  username: [
    {trigger: "change", validator: validatorUsername}
  ],
  password: [
    {trigger: "change", validator: validatorPassword}
  ]
}

const login = async () => {
  console.log("表单校验的结果" ,await loginForms.value.validate());
  loading.value = true;
  console.log(loginForm)

  try {
    await userStore.userLogin(loginForm);
    //登录成功跳转
    ElNotification({
      type: "success",
      message: "登录成功",
      title: getTime()/*这里是判断时间函数*/
    });
    //调用路由跳转到首页
    const redirect = route.query.redirect;
    router.push({path: (redirect as string) || "/"});
    loading.value = false;
  } catch (err: any) {
    // 登录失败显示错误通知
    ElNotification({
      type: "error",
      message: err.message
    });
    loading.value = false;
  }
}


</script>

<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="loginRules" ref="loginForms">
          <h2>Hello</h2>
          <p>欢迎来到硅谷甄选</p>
          <el-form-item prop="username">
            <el-input type="text" :prefix-icon="User" v-model="loginForm.username"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password/>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped lang="scss">
  .login_container {
    width: 100%;
    height: 100vh;
    background: url("../../assets/images/background.jpg") no-repeat center / cover;

    .login_form {
      width: 80%;
      padding: 40px;
      background: url("../../assets/images/login_form.png") no-repeat center / cover;
      border-radius: 10px;

      position: relative;
      top: 30vh;

      h2 {
        color: white;
        font-size: 40px;
      }

      p {
        margin: 20px 0;
        color: white;
      }

      .login_btn {
        width: 100%;
      }
    }
  }
</style>